WPF的DataGrid用法 |
您所在的位置：网站首页 › datagrid分页 wpf › WPF的DataGrid用法 |
WPF的DataGrid用法
前几天打算尝试下DataGrid的用法，起初以为应该很简单，可后来被各种使用方法和功能实现所折磨。网络上的解决方法太多，但也太杂。没法子，我只好硬着头皮阅览各种文献资料，然后不断的去尝试，总算小有成果。因此，把我学到的和大家分享一下，相信这篇文章会让你再很短的时间内学会DataGrid的大部分主要功能，而且很多难点都可以在里面找到解决方案。 由于涉及的应用比较多，所以篇幅会很长。但可以确保各个版块相互独立，总共4个部分 1.数据绑定 2.DataGrid的增改删功能 3.DataGrid的分页实现 4.DataGrid的样式设计 先上一张截图，让你大概知道自己需要的功能是否在这张图里有所实现。
PS：使用技术：WPF + ADO.NET Entity Framework
1.数据绑定（涉及DataGrid绑定和Combox绑定）
在DataGrid 中同时包含“自动生成列”与“用户自定义列” 由属性AutoGenerateColumns控制。 默认情况下， DataGrid 将根据数据源自动生成列。 下图列出了生成的列类型。
后台dataGrid1.ItemsSource = infoList; //infoList为内容集合（这是我从数据库中获取的记录集合 类型为List PS:因为这里给dataGrid1绑定了数据源，所以下面绑定的字段都是infoList中的字段名称，同样也对应着我数据表中的字段名。里面包含FID,公司名称，职员姓名，性别，年龄，职务。解释下，怕大家无法理解Binding 后面的值是如何来的了 显然这种数据绑定非常的容易，如果对表格要求不高，这中无疑是最简单方便的。
如果AutoGenerateColumns="False" 表格字段的显示就要靠我们手动去完成了。这个也是数据绑定的重点，因为实际应用中我们大多都是自定义去完成DataGrid的数据绑定。 接下来贴出代码（后面的所有功能都可以在此代码基础上添加和修改） x:Type> 引用后台的枚举类型，为字段‘性别’提供数据源。上面引用了命名空间Demo--> ObjectDataProvider.MethodParameters> ObjectDataProvider>Window.Resources> CheckBox> DataTemplate> DataGridTemplateColumn.CellTemplate> DataGridTemplateColumn> Combox绑定,获取上面定义的资源keySex.绑定性别--> DataGrid.Columns> DataGrid>Grid>Window>
后台 namespace Demo{/// /// MainWindow.xaml 的交互逻辑/// public enum Sex { 男,女 }; //注意 写在命名空间内 ，不要写在类里，否则台前local:Sex找不到路径 }
当我们绑定好数据运行程序的时候，会发现 DataGridComboBoxColumn下拉框里虽然绑定了值，但是他不会默认显示出已经设定好的值。所以我们就可以摈弃这种现有的 DataGridComboBoxColumn，我们用DataGrid样板标签DataGridTemplateColumn。 我们在DataGridTemplateColumn标签里要用到2个控件，一个 TextBlock控件来显示内容，另一个ComBox来提供选择。 所以我们可以用如下代码替换掉 显示状态时显示 TextBlock里的值--> DataTemplate> DataGridTemplateColumn.CellTemplate> 编辑状态就切换到ComboBox里进行下拉选择操作--> DataTemplate> DataGridTemplateColumn.CellEditingTemplate> DataGridTemplateColumn>注意 CellTemplate和 CellEditingTemplate的区别
2.DataGrid的增改删功能
①添加记录行+编辑记录行
由于增加和编辑有一定的联系，所以就放一起来讨论 在上面的代码处添加2个Button按钮,DataGrid默认是输入一行记录后自动会生成一个新行（类似MSSQL数据库添加表记录）。由属性 CanUserAddRows来控制 当 CanUserAddRows=false的时候就不会自动生成新行。为了方便我们自己来控制，所以在DataGrid里面设置CanUserAddRows为false. 此时的DataGrid就无法自己生成新行了--> DataGrid>Grid>
后台事件 int judge = 0; //0表示编辑状态，1为添加状态。因为后面的增加和编辑都在同一个事件中，所以建一个变量来区分操作 TB_Information tbInfo = new TB_Information(); //这个类可以供我调用里面的方法来进行增删改查的操作 private void btnAdd_Click(object sender, RoutedEventArgs e) { judge = 1; //现在为添加状态 dataGrid1.CanUserAddRows = true; //点击添加后 将CanUserAddRows重新设置为True，这样DataGrid就会自动生成新行，我们就能在新行中输入数据了。} //现在我们可以添加新记录了，我们接下来要做的就是获取这些新添加的记录 //先声明一个存储新建记录集的List这里的Information是我的数据表实体类 里面包含FID ，公司名称，职员姓名，性别，年龄，职务 ListlstInformation = new List(); //我们通过 RowEditEnding来获取新增的记录，就是每次编辑完行后，行失去焦点激发该事件。 更新记录也是执行该事件 private void dataGrid1_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e) { Information info = new Information(); //我自己的数据表实例类 info = e.Row.Item as Information; //获取该行的记录 if (judge == 1) //如果是添加状态就保存该行的值到lstInformation中 这样我们就完成了新行值的获取 { lstInformation.Add(info); } else { tbInfo.UpdInformation(info); //如果是编辑状态就执行更新操作 更新操作最简单，因为你直接可以在DataGrid里面进行编辑，编辑完成后执行这个事件就完成更新操作了 } } //获取到记录后，单击保存按钮就可以保存lstInformation中的每一条记录private void btnSave_Click(object sender, RoutedEventArgs e) { foreach (Information info in lstInformation) { tbInfo.InsInformation(info); //执行插入方法，将记录保存到数据库 } judge = 0; //重新回到编辑状态 lstInformation.Clear(); dataGrid1.CanUserAddRows = false; //因为完成了添加操作 所以设置DataGrid不能自动生成新行了 Binding(Num, 1); }
这里又会遇到一个问题。那就是更新数据的时候，发现数据更本就没更新。跟踪代码会发现后台得到的值还是原来的，无法获取编辑后的值。这个问题就是绑定模式的问题，我们只需设置双向绑定就可以了。且作用对象是在属性值更改的情况下进行双向绑定。 只要在前面的每个表字段处加上 Mode=TwoWay, UpdateSourceTrigger=PropertyChanged问题就解决了 例如：
②删除记录
为了有良好的用户体验，我就做了个可以批量删除的删除功能。就是利用到CheckBox控件来完成。 以绑定代码为基础添加代码 Grid>
首先我们要获取CheckBox中的值，有哪些是被选中的。显然CheckBox里面还必须绑定值，并且还需要一个事件。给CheckBox添加的代码如下 CheckBox>DataTemplate>
后台代码 //由ChecBox的Click事件来记录被选中行的FID List selectFID = new List(); //保存选中要删除行的FID值 private void CheckBox_Click(object sender, RoutedEventArgs e) { CheckBox dg = sender as CheckBox; int FID = int.Parse(dg.Tag.ToString()); //获取该行的FID var bl = dg.IsChecked; if (bl == true) { selectFID.Add(FID); //如果选中就保存FID } else { selectFID.Remove(FID); //如果选中取消就删除里面的FID } } //已经获取到里面的值了，接下来就只要完成删除操作就可以了 删除事件如下 private void btnDelete_Click(object sender, RoutedEventArgs e) { foreach (int FID in selectFID) { tbInfo.DelInformation(FID); //循环遍历删除里面的记录 } //Binding(Num, 1); //这个是我绑定的一个方法，作用是删除记录后重新给DataGrid赋新的数据源}
3.DataGrid的分页实现 原理：其实分页功能的实现大家都清楚，无非就是把一个记录集通过运算来刷选里面对应页码的记录。 接来下我们再次添加新的代码 省略N个代码-->DataGrid> TextBlock>StackPanel>Grid>
首先我们先写个分页的方法，供上面这些事件调用 后台代码 //number表示每个页面显示的记录数 currentSize表示当前显示页数 private void Binding(int number, int currentSize) { ListinfoList = new List(); infoList = tbInfo.GetInformationList(); //获取数据源 int count = infoList.Count; //获取记录总数 int pageSize = 0; //pageSize表示总页数 if (count % number == 0) { pageSize = count / number; } else { pageSize = count / number + 1; } tbkTotal.Text = pageSize.ToString(); tbkCurrentsize.Text = currentSize.ToString(); infoList = infoList.Take(number * currentSize).Skip(number * (currentSize - 1)).ToList(); //刷选第currentSize页要显示的记录集 dataGrid1.ItemsSource = infoList; //重新绑定dataGrid1} //分页方法写好了 接下来就是响应下一页，上一页，和跳转页面的事件了 //先定义一个常量 const int Num=12; //表示每页显示12条记录 //上一页事件 private void btnUp_Click(object sender, RoutedEventArgs e) { int currentsize = int.Parse(tbkCurrentsize.Text); //获取当前页数 if (currentsize > 1) { Binding(Num, currentsize - 1); //调用分页方法 } } //下一页事件private void btnNext_Click(object sender, RoutedEventArgs e) { int total = int.Parse(tbkTotal.Text); //总页数 int currentsize = int.Parse(tbkCurrentsize.Text); //当前页数 if (currentsize = 1 && pageNum LinearGradientBrush> Setter.Value> Setter> Style> DataGrid.RowHeaderStyle>省略N个代码-->DataGrid>
②给列表头添加颜色 给整个表头添加颜色开始--> LinearGradientBrush> Setter.Value> Setter> Style> DataGrid.ColumnHeaderStyle>给整个表头添加颜色结束--> 给单个列表头添加颜色开始(以操作列表头为例)--> LinearGradientBrush> Setter.Value> Setter> Style> DataGridColumn.HeaderStyle> DataGridTemplateColumn> DataGrid.Columns>给单个列表头添加颜色结束-->省略N个代码-->DataGrid>
③给行添加颜色+滑鼠事件 当鼠标经过时 改变颜色--> Trigger> Style.Triggers> Style> DataGrid.RowStyle> 省略N个代码-->DataGrid>
④给单元格添加颜色 单元格被选中时 改变颜色--> Trigger> Style.Triggers> Style>DataGrid.CellStyle> 省略N个代码-->DataGrid> ⑤ 让用户在单元格获得焦点时编辑 ComboBox
其实这不属于样式的范畴了，但我喜欢把改善用户体验归于这一类。当我们的表格里有类似ComboBox的控件时（如： DatePicker 控件等）。我们编辑这些控件时，首先第一次单击获取单元格焦点，第二次点击才能获取编辑时的焦点，也就是用户必须单击2次才能进行操作。这种机制其实是适合文本框控件的，但对于其它控件，像ComboBox就显得很不方便了。所以我们要做的就是单击第一次的时候用户就可以编辑ComboBox。 接下来我要在DataGrid添加了三个新属性（RowDetailsVisibilityMode、SelectionMode 和 SelectionUnit）和一个新的事件处理程序 (SelectedCellsChanged) 前台 DataGrid>
后台 现在就差一个 SelectedCellsChanged(选则单元格时出发该事件)事件的后台代码了 private void dataGrid1_SelectedCellsChanged(object sender, SelectedCellsChangedEventArgs e) { if (e.AddedCells.Count == 0) return; var currentCell = e.AddedCells[0]; if (currentCell.Column == dataGrid1.Columns[3]) //Columns[]从0开始 我这的ComboBox在第四列 所以为3 { dataGrid1.BeginEdit(); // 进入编辑模式 这样单击一次就可以选择ComboBox里面的值了 } }
⑥固定列表头
这个非常简单 只要在DataGrid里添加一个属性即可 从1开始 1表示第一列 这里如果要固定我的操作列就设置为1-->DataGrid> |
如果AutoGenerateColumns="True" ，我们只需要如下几行代码【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |